<template>
  <div class="container">

    <h1>
      测试循环创建的video视频标签通过vue的ref属性获取dom使用dom上的对象方法失效
    </h1>
    <div class="videoWrapper" v-for="(item, idx) in list" :key="idx">
      <video
        :src="item.src"
        style="width: 200px; height: 200px"
        muted
        loop
        :ref="item.ref"
        controls
      ></video>
    </div>

    <el-button type="primary" size="default" @click="add">添加视频</el-button>
    <el-button type="primary" size="default" @click="handlerLast"
      >操作原有视频</el-button
    >
    <el-button type="primary" size="default" @click="handlerNext"
      >操作后添加视频</el-button
    >

  </div>
</template>

<script>
export default {
  name: "vedio",
  data() {
    return {
        list: [
        {
          ref: "1",
          src: require("../assets/粒子A_1.mp4"),
        },
      ],
    };
  },
  methods: {
      // 添加视频
    add() {
      this.list.push({
        ref: "2",
        src: require("../assets/trailer.mp4"),
      });
    },
    handlerLast() {
      console.log(this.$refs["1"][0]);
      var vide = this.$refs["1"][0];
      if (vide.paused) {
        vide.play();
        vide.muted = false;
      } else if (vide.play()) {
        vide.pause();
        vide.muted = true;
      }
    },
    handlerNext() {
      console.log(this.$refs["2"][0]);
      var vide = this.$refs["2"][0];
      if (vide.paused) {
        vide.play();
        vide.muted = false;
      } else if (vide.play()) {
        vide.pause();
        vide.muted = true;
      }
    },
  }
};
</script>

<style></style>
